<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>城市下拉选择组件</title>
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>

<body>
	<div class="container">
		<h3>模拟城市-不自动选择第一项/无搜索/四级城市</h3>
		<div class="dome-main">
			<div class="city-picker-selector" id="city-picker-selector1"></div><!-- end .city-picker-selector -->
			<div class="btn-cont">
				<button class="btn btn-setcity">设置城市</button>
				<button class="btn btn-bg-1 btn-obtain">获取城市</button>
				<button class="btn btn-bg-2 btn-prohibit">禁止状态</button>
				<button class="btn btn-bg-3 btn-current">可用状态</button>
			</div><!-- end .btn-cont -->
			<div class="code">
				<a href="javascript:;" class="show-code">code</a>
				<pre><code>var selector1 = $('#city-picker-selector1').cityPicker({
					dataJson: cityData,
					renderMode: true,
					search: false,
					autoSelected: false,
					code: 'cityCode',
					level: 4,
					onChoiceEnd: function() {
						console.log(this.values)
					}
				});

				// 设置城市
				selector1.setCityVal('广东省, 广州市, 天河区, 天园街道');

				// 省份选择的回调
				$('#city-picker-selector1').on('choose-province.citypicker', function(event, tagert, values) {
					console.log(values);
				});
	
				// 城市选择的回调
				$('#city-picker-selector1').on('choose-city.citypicker', function(event, tagert, values) {
					console.log(values);
				});
	
				// 区县选择的回调
				$('#city-picker-selector1').on('choose-district.citypicker', function(event, tagert, values) {
					console.log(values);
				});

				// 街道选择的回调
				$('#city-picker-selector1').on('choose-street.citypicker', function(event, tagert, values) {
					console.log(values);
				});</code></pre>
			</div><!-- end .code -->
		</div><!-- end .dome-main -->

		<h3>模拟城市-自动选择第一项/无搜索/三级城市</h3>
		<div class="dome-main">
			<div class="city-picker-selector" id="city-picker-selector2"></div><!-- end .city-picker-selector -->
			<div class="code">
				<a href="javascript:;" class="show-code">code</a>
				<pre><code>var selector2 = $('#city-picker-selector2').cityPicker({
					dataJson: cityData,
					renderMode: true,
					search: false,
					autoSelected: true,
					code: 'cityCode',
					level: 3,
					onChoiceEnd: function() {
						console.log(this.values)
					}
				});
	
				// 设置城市
				selector2.setCityVal('广东省, 广州市, 天河区');</code></pre>
			</div><!-- end .code -->
		</div><!-- end .dome-main -->

		<h3>模拟城市-联动/搜索/键盘操作/二级城市</h3>
		<div class="dome-main">
			<div class="city-picker-selector" id="city-picker-search"></div><!-- end .city-picker-selector -->
			<div class="code">
				<a href="javascript:;" class="show-code">code</a>
				<pre><code>var selector3 = $('#city-picker-search').cityPicker({
					dataJson: cityData,
					renderMode: true,
					search: true,
					autoSelected: true,
					keyboard: true,
					level: 2,
					onChoiceEnd: function() {
						console.log(this.values)
					}
				});</code></pre>
			</div><!-- end .code -->
		</div><!-- end .dome-main -->

		<h3>模拟城市-联动/搜索/键盘操作/一级城市</h3>
		<div class="dome-main">
			<div class="city-picker-selector" id="city-picker-search2"></div><!-- end .city-picker-selector -->
			<div class="code">
				<a href="javascript:;" class="show-code">code</a>
				<pre><code>var selector4 = $('#city-picker-search2').cityPicker({
					dataJson: cityData,
					renderMode: true,
					search: true,
					autoSelected: true,
					keyboard: true,
					level: 1,
					onChoiceEnd: function() {
						console.log(this.values)
					}
				});</code></pre>
			</div><!-- end .code -->
		</div><!-- end .dome-main -->

		<h3>原生城市-联动</h3>
		<div class="dome-main">
			<div class="city-picker-select"></div><!-- end .city-picker-select -->
			<div class="code">
				<a href="javascript:;" class="show-code">code</a>
				<pre><code>var select = $('.city-picker-select').cityPicker({
					dataJson: cityData,
					renderMode: false,
					autoSelected: true,
					level: 4,
					onChoiceEnd: function() {
						console.log(this.values)
					}
				});
	
				// 设置城市
				select.setCityVal('山西省, 太原市, 小店区, 坞城街道');</code></pre>
			</div><!-- end .code -->
		</div><!-- end .dome-main -->
	</div><!-- end .container -->

	<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<script type="text/javascript" src="js/citydata.min.js"></script>
	<script type="text/javascript" src="js/cityPicker-2.0.4.js"></script>
	<script type="text/javascript">
		$(function () {
			// 显示代码
			$('.show-code').on('click', function (event) {
				var $this = $(this);

				$this.next('pre').slideToggle(500);
			});

			// 模拟城市-无联动/无搜索
			var selector1 = $('#city-picker-selector1').cityPicker({
				dataJson: cityData,
				renderMode: true,
				search: false,
				storage: false,
				autoSelected: false,
				shorthand: true,
				code: 'cityCode',
				level: 4,
				onChoiceEnd: function() {
					console.log(this.values)
				}
			});

			// 设置城市
			selector1.setCityVal('广东省, 广州市, 天河区, 天园街道');

			$('.btn-setcity').on('click', function (event) {
				selector1.setCityVal('广东省, 深圳市, 罗湖区, 桂园街道');
			});

			// 获取城市值
			$('.btn-obtain').on('click', function (event) {
				alert(JSON.stringify(selector1.getCityVal()));
			});

			$('.btn-prohibit').on('click', function (event) {
				selector1.changeStatus('disabled');
			});

			$('.btn-current').on('click', function (event) {
				selector1.changeStatus('current');
			});

			// 模拟城市-无联动/无搜索
			var selector2 = $('#city-picker-selector2').cityPicker({
				dataJson: cityData,
				renderMode: true,
				search: false,
				autoSelected: true,
				code: 'cityCode',
				level: 3,
				onChoiceEnd: function() {
					console.log(this.values)
				}
			});

			// 设置城市
			selector2.setCityVal('天津市,天津市,河西区,陈塘庄街道');


			// 模拟城市-联动/搜索/键盘操作
			var selector3 = $('#city-picker-search').cityPicker({
				dataJson: cityData,
				renderMode: true,
				search: true,
				autoSelected: true,
				keyboard: true,
				level: 2,
				onChoiceEnd: function() {
					console.log(this.values)
				}
			});

			// 模拟城市-联动/搜索/键盘操作
			var selector4 = $('#city-picker-search2').cityPicker({
				dataJson: cityData,
				renderMode: true,
				search: true,
				autoSelected: true,
				keyboard: true,
				level: 1,
				onChoiceEnd: function() {
					console.log(this.values)
				}
			});

			//原生城市-联动
			var select = $('.city-picker-select').cityPicker({
				dataJson: cityData,
				renderMode: false,
				storage: false,
				autoSelected: true,
				level: 4,
				onChoiceEnd: function() {
					console.log(this.values)
				}
			});

			// 设置城市
			select.setCityVal('山西省, 太原市, 小店区, 坞城街道');
		});
	</script>
</body>

</html>